<template>
  <div class="wrapper">
    <!--    检验申请项目清单-->
    <div class="labList">
      <div class="title">检验申请项目清单</div>
      <el-scrollbar ref="elbar" style="width:100%;height:200px">
        <div class="tablist">
          <Bluetable
            ref="blueTable"
            :t-head="PatientLabListHead"
            :t-data="PatientLabList"
            @operateClick="operateClickPatientLabList"
          />
          <pagination
            :total="GetPatientLabListPage.total"
            :page.sync="GetPatientLabListPage.pagenum"
            :limit.sync="GetPatientLabListPage.pagesize"
            @pagination="pageGetPatientLabListPage"
          />
        </div>
      </el-scrollbar>
    </div>
    <!--    检验结果-->
    <div class="labDetail">
      <div class="title">[{{ projectname }}]检验结果</div>
      <el-scrollbar ref="elbar" style="width:100%;height:200px">
        <div class="tablist">
          <Bluetable
            ref="blueTable"
            :t-head="PatientLabDetailListHead"
            :t-data="PatientLabDetailList"
            @operateClick="operateClickPatientLabDetailList"
          />
          <pagination
            :total="GetPatientLabListPage.total"
            :page.sync="GetPatientLabListPage.pagenum"
            :limit.sync="GetPatientLabListPage.pagesize"
            @pagination="pageGetPatientLabDetailListPage"
          />
        </div>
      </el-scrollbar>
    </div>

    <el-dialog
      title="趋势图"
      :visible.sync="dialogVisible"
      width="70%"
      @close="closeDialog"
    >
      <div
        id="myChart1"
        class="myChart"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { GetPatientLabList, GetPatientLabDetailList } from '@/api/cpw'
export default {
  name: 'PatientLabList',
  props: {
    patientDetailFather: {
      type: Object
    }
  },
  data() {
    return {
      patientDetail: {
        // Patient_id: '227058',
        // Visit_id: '3'
      },
      GetPatientLabListPage: {
        pagesize: 10,
        pagenum: 1,
        total: 0
      },
      GetPatientLabDetailListPage: {
        pagesize: 10,
        pagenum: 1,
        total: 0
      },

      Requestno: '',
      Itemcode: '',
      projectname: '请选择项目名称',

      PatientLabList: [],
      PatientLabListHead: [
        {
          operate: ['查看'],
          label: '趋势',
          link: true,
          width: '100px'
        }, {
          prop: 'projectcode',
          label: '项目编码'
        }, {
          prop: 'projectname',
          label: '项目名称'
        }, {
          prop: 'doctorname',
          label: '申请医生'
        }, {
          prop: 'labname',
          label: '标本类型'
        }, {
          prop: 'samplingtime',
          label: '采样时间'
        }
      ],

      PatientLabDetailList: [],
      PatientLabDetailListHead: [
        {
          operate: ['查看'],
          label: '操作',
          link: true,
          width: '100px'
        }, {
          prop: 'itemcode',
          label: '项目编码'
        }, {
          prop: 'itemname',
          label: '项目名称'
        }, {
          prop: 'range',
          label: '参考范围'
        }, {
          prop: 'labresult',
          label: '结果'
        }, {
          prop: 'unit',
          label: '单位'
        }, {
          prop: 'flag',
          label: '提示'
        }, {
          prop: 'reporttime',
          label: '结果时间'
        }
      ],

      PatientLabDetailCharList: [],
      setOptions: {},
      dialogVisible: false
    }
  },
  watch: {
    patientDetailFather(val, oldVal) {
      this.patientDetail = val
      this.getPatientLabList()
    },
    // 观察option的变化
    setOptions: {
      handler(newVal, oldVal) {
        if (this.myChart1) {
          if (newVal) {
            this.myChart1.setOption(newVal)
          } else {
            this.myChart1.setOption(oldVal)
          }
        } else {
          this.initCharts()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  mounted() {
    this.getPatientLabList()
  },
  methods: {
    // 1. 初始化时调用获取病人的检验列表
    getPatientLabList() {
      this.GetPatientLabListPage = {
        pagesize: 10,
        pagenum: 1,
        total: 0
      }
      this.GetPatientLabList()
    },
    async GetPatientLabList() {
      await GetPatientLabList({
        pagesize: this.GetPatientLabListPage.pagesize,
        pagenum: this.GetPatientLabListPage.pagenum,
        json: {
          Patient_id: this.patientDetail.patient_id,
          Visit_id: this.patientDetail.visit_id
        }
      }).then(res => {
        this.PatientLabList = res.PatientLabList
        this.GetPatientLabListPage.total = res.records
      }).catch(err => {
        console.log(err)
      })
    },
    pageGetPatientLabListPage(type) {
      this.GetPatientLabListPage.pagenum = type.page
      this.GetPatientLabListPage.pagesize = type.limit
      this.GetPatientLabList()
    },
    // 表格查看详细列表
    operateClickPatientLabList(val, row) {
      this.Requestno = row.requestno
      this.projectname = row.projectname
      this.getPatientLabDetailList()
    },

    // 详细列表
    getPatientLabDetailList() {
      this.GetPatientLabDetailListPage = {
        pagesize: 10,
        pagenum: 1,
        total: 0
      }
      this.GetPatientLabDetailList()
    },
    async GetPatientLabDetailList() {
      await GetPatientLabDetailList({
        pagesize: this.GetPatientLabDetailListPage.pagesize,
        pagenum: this.GetPatientLabDetailListPage.pagenum,
        json: {
          Patient_id: this.patientDetail.patient_id,
          Visit_id: this.patientDetail.visit_id,
          Requestno: this.Requestno
        }
      }).then(res => {
        this.PatientLabDetailList = res.PatientLabDetailList
        this.GetPatientLabDetailListPage.total = res.records
      }).catch(err => {
        console.log(err)
      })
    },
    pageGetPatientLabDetailListPage(type) {
      this.GetPatientLabDetailListPage.pagenum = type.page
      this.GetPatientLabDetailListPage.pagesize = type.limit
      this.GetPatientLabList()
    },
    showDialog() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initCharts()
      })
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    // 生成趋势图
    operateClickPatientLabDetailList(val, row) {
      this.Itemcode = row.itemcode
      this.GetPatientLabDetailListChart()
    },
    // 趋势图数据
    async GetPatientLabDetailListChart() {
      await GetPatientLabDetailList({
        json: {
          Itemcode: this.Itemcode,
          Patient_id: this.patientDetail.patient_id
        }
      }).then(res => {
        this.PatientLabDetailCharList = res.PatientLabDetailList
        this.setOptionsData()
        this.showDialog()
      }).catch(err => {
        console.log(err)
      })
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart1'))
      this.setOptionsCharts()
    },
    setOptionsCharts() {
      this.chart.setOption(this.setOptions)
    },
    setOptionsData() {
      this.setOptions = {
        title: {
          text: '趋势图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['检验结果']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: this.PatientLabDetailCharList.map(obj => {
              return obj.reporttime
            })
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '结果',
            min: 0,
            offset: 20,
            position: 'left',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '结果',
            type: 'line',
            yAxisIndex: 0,
            data: this.PatientLabDetailCharList.map(obj => {
              return obj.labresult
            })
            // data: []
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .wrapper{
    /*color: #29a4f2;*/
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .labList{
      margin-top: 10px;
    }
    .labDetail{
      margin-top: 10px;
    }
    .title{
      border-left: #2f90fd 2px solid;
      padding-left: 20px;
    }
    .tablist{
      margin-top: 20px;
    }

  }
  .myChart{
    width : 1000px;
    height: 400px;
  }

</style>
